<template>
  <base-content>
    <template>
      <sf-base-search
        ref="baseSearchEle"
        :base-searchs="baseSearchs"
        :all-searchs="allSearchs"
        :base-handles="baseHandles"
        :base-data="baseFormData"
      />

      <sf-grid ref="grid" :columns="columns" :store-config="configs" />
    </template>
  </base-content>
</template>

<script>
import { queryParams } from '@/utils'
import { fetchVerificationList } from '@/api/verification'

export default {
  data() {
    return {
      // here is dialog
      isShow: false,
      eles: [
        {
          label: '用户ID',
          elType: 'input',
          placeholder: '请输入用户手机号',
          value: '',
          name: 'id'
        },
        {
          label: '积分数量',
          elType: 'input',
          placeholder: '可以是负值',
          value: '',
          name: 'itemCode'
        }
      ],
      baseSearchs: [
        {
          label: '时间',
          elType: 'date-time-range',
          width: '400px',
          value: [],
          name: 'time'
        },
        {
          label: '状态',
          elType: 'select',
          placeholder: '请选择状态',
          value: '',
          name: 'user_confirm_status',
          options: [
            {
              label: '已核销',
              value: 1
            },
            {
              label: '待核销',
              value: 0
            }
          ]
        },
        {
          label: '订单id',
          elType: 'input',
          placeholder: '订单id',
          value: '',
          name: 'order_id'
        },
        {
          label: '用户id',
          elType: 'input',
          placeholder: '请输入用户id',
          value: '',
          name: 'user_id'
        },
        {
          label: '商品id',
          elType: 'input',
          placeholder: '请输入商品id',
          value: '',
          name: 'product_id'
        }
      ],
      allSearchs: [],
      baseHandles: [
        {
          btnType: 'primary',
          text: '查询',
          key: 'search',
          handle: this.handleBaseSearch
        },
        {
          btnType: 'default',
          text: '重置',
          key: 'reset',
          handle: this.handleBaseSearch
        }
      ],
      baseFormData: {},
      // here is table
      columns: [
        {
          title: '核销码',
          props: 'code'
        },
        {
          title: '核销时间',
          props: 'user_confirm_time'
        },
        {
          title: '商品id',
          props: 'product_id'
        },
        {
          title: '订单id',
          props: 'order_id'
        },
        {
          title: '用户id',
          props: 'user_id'
        },
        {
          title: '门店机构',
          props: 'dept_name'
        },
        {
          title: '用户确认状态',
          formatter(val) {
            const { user_confirm_status } = val
            const statusT = { 0: '未确认', 1: '已确认' }
            return statusT[user_confirm_status]
          }
        },
        {
          title: '确认时间',
          props: 'user_confirm_time'
        }
      ],
      formData: {},
      configs: {
        loadDataApi: (p) => {
          return new Promise((resolve) => {
            fetchVerificationList(queryParams(p, this.formData)).then((res) => {
              resolve(res)
            })
          })
        },
        fetchListData: function (res) {
          return res.data
        },
        fetchTotal: function (res) {
          return res.meta.count
        },
        generateQueryParams: function (pagination) {
          const { pageIndex, pageSize } = pagination
          return {
            page_num: pageIndex,
            page_size: pageSize
          }
        }
      }
    }
  },
  methods: {
    // val: 当前表单中的数据
    // key 用来handles 中设置的唯一标识key值
    handleBaseSearch(val, key) {
      if (key === 'search') {
        const { time } = val
        this.formData = val
        if (time && time.length > 0) {
          this.formData.start_time = time[0]
          this.formData.end_time = time[1]
        }
        this.$refs.grid.query()
      } else if (key === 'add') {
        this.isShow = true
      } else {
        const formEle = this.$refs.baseSearchEle
        formEle.empty()
        this.$refs.grid.query()
      }
    }
  }
}
</script>
